<template>
  <div>
    <!-- 新增设备 -->
    <el-dialog
      class="dialog"
      title="货到行数"
      :visible="dialogSetting"
      width="70%"
      height="60%"
      @close="closeDialog"
      @open="openDialog"
    >
      <el-card class="top">
        <el-row type="flex" align="middle" justify="space-between">
          <el-col :span="18">
            <el-row type="flex">
              <el-col :span="6">货道行数:{{ TopList.vmRow }}</el-col>
              <el-col :span="6">货道列数:{{ TopList.vmCol }}</el-col>
              <el-col
                :span="6"
              >货道容量(个):{{ TopList.channelMaxCapacity }}</el-col>
            </el-row>
          </el-col>
          <el-col
            :span="4"
          ><el-button
            type="primary"
            size="small"
            @click="Sorting"
          >智能排货</el-button></el-col>
        </el-row>
      </el-card>
      <el-card>
        <el-scrollbar ref="scroll">
          <el-row
            v-for="(num, index) in TopList.vmRow"
            :key="index"
            type="flex"
          >
            <el-col
              v-for="item in SkuchannelList.slice(
                TopList.vmCol * index,
                TopList.vmCol * num
              )"
              :key="item.channelId"
              :span="12"
              style="padding-left: 8px; padding-right: 8px"
            >
              <div class="item">
                <div class="code">{{ item.channelCode }}</div>
                <div class="sku">
                  <img
                    :src="
                      item.sku
                        ? item.sku.skuImage
                        : ''
                    "
                    alt=""
                  >
                  <div>{{ item.sku ? item.sku.brandName : "暂无商品" }}</div>
                </div>
                <div>
                  <el-button
                    type="text"
                    @click="addSku(item.channelCode)"
                  >添加</el-button>
                  <el-button
                    type="text"
                    style="color: red"
                    @click="delSku(item.channelCode)"
                  >删除</el-button>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-scrollbar>
        <svg-icon icon-class="right" class="icon-right" @click="rightScrol" />
        <svg-icon icon-class="left" class="icon-left" @click="leftScrol" />
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          class="sure"
          @click="SettingFn"
        >确定</el-button>
      </div>
    </el-dialog>
    <!-- 智能排序 -->
    <el-dialog
      class="dialog"
      title="智能排序"
      :visible="dialogSortting"
      width="60%"
      @close="closeSorttingDialog"
      @open="openSorttingDialog"
    >
      <el-main>
        <div class="header">
          该区域属于<span>{{ businessType }}</span>商圈适合销售一下商品：
        </div>
        <el-row>
          <el-col
            v-for="item in businessList"
            :key="item.skuId"
            :span="5"
            style="padding-left: 10px; padding-right: 10px; margin-bottom: 20px"
          >
            <div class="itemSortting">
              <div class="sku">
                <img :src="item.image" alt="">
                <div>{{ item.skuName }}</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-main>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          class="sure"
          @click="SorttingFn"
        >采纳建议</el-button>
      </div>
    </el-dialog>
    <!-- 选择商品 -->
    <el-dialog
      class="dialog"
      title="选择商品"
      :visible="dialogSku"
      width="60%"
      @close="closeSkuDialog"
      @open="openSkuDialog"
    >
      <el-main>
        <PageTools>
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="商品名称:">
              <el-input v-model="skuName" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="SearchSku"
              >查询</el-button>
            </el-form-item>
          </el-form>
        </PageTools>
        <el-row>
          <el-col
            v-for="item in SkuSearchList"
            :key="item.skuId"
            :span="5"
            style="padding-left: 10px; padding-right: 10px; margin-bottom: 20px"
          >
            <!--   v-if="skuObj.skuId===item.skuId" -->
            <div class="itemSortting space" @click="selectsku(item)">
              <img
                v-if="skuObj.skuId === item.skuId"
                class="selected"
                src=""
                alt=""
              >
              <div class="sku">
                <img :src="item.skuImage" alt="">
                <div>{{ item.brandName }}</div>
              </div>
            </div>
          </el-col>
        </el-row>
        <svg-icon icon-class="right" class="icon-right" @click="addPage" />
        <svg-icon icon-class="left" class="icon-left" @click="subPage" />
      </el-main>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          class="sure"
          @click="AddskuFn"
        >确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { GetvmTop, channelList, businessTop10, SkuSearch, channelConfig } from '@/api/vm'
export default {
  props: {
    dialogSetting: {
      type: Boolean,
      default: false
    },
    setingObj: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      TopList: {}, // 存放头部数据
      SkuchannelList: [],
      seting: {
        innerCode: '',
        channelList: []
      },
      // ----------------------------
      dialogSortting: false,
      businessType: null,
      businessList: [],
      // 选择商品--------------------
      dialogSku: false,
      skuName: '', // 商品名称
      SkuSearchList: [],
      page: {
        pageIndex: 1,
        pageSize: 10
      },
      totalPage: '',
      skuObj: {},
      skuCode: ''
    }
  },
  methods: {
    closeDialog() {
      this.$emit('close')
    },
    async openDialog() {
      const { data } = await GetvmTop(this.setingObj.type.typeId)
      this.TopList = data
      const { data: channel } = await channelList(this.setingObj.innerCode)
      this.SkuchannelList = channel
    },
    // 向右滚动
    rightScrol() {
      this.$refs['scroll'].wrap.scrollTo({
        left: 847,
        behavior: 'smooth'
      })
    },
    leftScrol() {
      this.$refs['scroll'].wrap.scrollTo({
        left: -1000,
        behavior: 'smooth'
      })
    },
    // 货道设置--确定
    async  SettingFn() {
      this.SkuchannelList.forEach(item => {
        if (item.sku) {
          this.seting.channelList.push({ channelCode: item.channelCode, skuId: item.sku.skuId })
        } else {
          this.seting.channelList.push({ channelCode: item.channelCode, skuId: 0 })
        }
      })
      this.seting.innerCode = this.setingObj.innerCode
      console.log(this.seting.channelList)
      await channelConfig(this.seting)
      this.seting.channelList = []
      this.$emit('resreh')
    },
    // 删除商品
    delSku(channelCode) {
      //   console.log(channelCode)
      this.SkuchannelList.forEach((item) => {
        if (item.channelCode === channelCode) {
          item.sku = null
        }
      })
    },
    // 添加商品
    addSku(channelCode) {
      this.dialogSku = true
      this.skuCode = channelCode
    },
    // 智能排序------------------------------------------------
    Sorting() {
      this.dialogSortting = true
    },
    closeSorttingDialog() {
      this.dialogSortting = false
    },
    async openSorttingDialog() {
      this.businessType = this.setingObj.node.businessType.name
      const { data } = await businessTop10(this.setingObj.node.businessId)
      this.businessList = data
    },
    SorttingFn() {
      this.dialogSetting = false
    },
    // 选择商品----------------------------------------------
    // 确定
    AddskuFn() {
      this.SkuchannelList.forEach(item => {
        if (item.channelCode === this.skuCode) {
          item.sku = this.skuObj
        }
      })
      this.dialogSku = false
      this.skuObj = {}
    },
    closeSkuDialog() {
      this.dialogSku = false
    },
    async openSkuDialog() {
      const { data } = await SkuSearch(this.page)
      this.SkuSearchList = data.currentPageRecords
      this.totalPage = Number(data.totalPage)
    },
    async addPage() {
      if (this.page.pageIndex >= this.totalPage) return
      this.page.pageIndex++
      const { data } = await SkuSearch(this.page)
      this.SkuSearchList = data.currentPageRecords
    },
    async subPage() {
      if (this.page.pageIndex <= 1) return
      this.page.pageIndex--
      const { data } = await SkuSearch(this.page)
      this.SkuSearchList = data.currentPageRecords
    },
    async SearchSku() {
      const { data } = await SkuSearch({ ...this.page, skuName: this.skuName })
      this.SkuSearchList = data.currentPageRecords
    },
    // 选择商品
    selectsku(item) {
      this.skuObj = item
      console.log(item.skuImage)
    }
  }
}
</script>
<style lang="scss" scoped>
.el-card__body {
  padding: 8px;
}
.row {
  margin-top: 20px;
}
.top {
  background: #f3f6fb;
}
.icon-right {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 50px !important;
  height: 50px !important;
  cursor: pointer;
}

.icon-left {
  position: absolute;
  top: 50%;
  left: 15px;
  width: 50px !important;
  height: 50px !important;
  cursor: pointer;
}
.el-scrollbar {
  width: 820px;
  height: 384px;
  margin: 0 auto;

  // background-color: #5f84ff;
  .el-col {
    width: 50%;
  }
}
.item {
  position: relative;
  width: 150px;
  height: 180px;
  background: #fff;
  -webkit-box-shadow: 0 2px 4px 0 rgb(0 0 0 / 6%);
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 6%);
  border-radius: 4px;
  text-align: center;
  .code {
    position: absolute;
    top: 10px;
    left: 0;
    width: 43px;
    height: 23px;
    line-height: 23px;
    background: #829bed;
    border-radius: 0 10px 10px 0;
    font-size: 12px;
    color: #fff;
  }
  .sku {
    height: 135px;
    padding-top: 16px;
    background-color: #f6f7fb;
    border-radius: 4px;
    img {
      margin-bottom: 10px;
      height: 78px;
    }
  }
}
.el-col-5 {
  width: 19% !important;
}
.itemSortting {
  .sku {
    width: 134px;
    height: 134px;
    padding-top: 16px;
    background-color: #f6f7fb;
    -webkit-box-shadow: 0 2px 4px 0 rgb(0 0 0 / 6%);
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 6%);
    border-radius: 4px;
    text-align: center;
    img {
      display: inline-block;
      width: 83px;
      height: 84px;
      margin-bottom: 5px;
      -o-object-fit: contain;
      object-fit: contain;
    }
  }
}
.el-main {
  padding: 0;
  .header {
    padding-left: 10px;
    margin-bottom: 10px;
  }
}
.space {
  margin-bottom: 20px;
  width: 134px;
  height: 134px;
  cursor: pointer;
}
.selected {
  position: absolute;
  // top: 0;
  // left: -10px;
  // height: 40px;
}
</style>
